{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
	.w-200px{width: 200px;}
	.el-upload-list{width: 30%;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

		  <el-form-item label="关键词" prop="keyword">
		    <el-input v-model="form.keyword" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Keywords" maxlength="20" show-word-limit></el-input>
		  </el-form-item>			  
		  <el-form-item label="回复内容" prop="value">
		    <el-input v-model="form.value" class="col-12 col-sm-3 pl-0 pr-0"
			  type="textarea"
			  :autosize="{ minRows: 6, maxRows: 20}"></el-input>
		  </el-form-item>

		  <el-form-item label="类型" prop="type">
		    <el-radio-group class="ml-0 ml-sm-2" v-model="form.type">
		      <el-radio label="text">文本[默认]</el-radio>
		      <el-radio label="image">图片</el-radio>
		      <el-radio label="video">视频</el-radio>
		      <el-radio label="event">事件</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item label="图片" prop="path" v-if="form.type==='image'">
		  	  <el-upload
				  action="/uploadFiles"
				  name="file"
				  ref="upload"
				  accept="image/*"
				  :data="{path:'wechat/keywords/image'}"
				  show-file-list
				  :on-success="handleFilesSuccess"
				  :on-error="handleFilesError"
				  :on-remove="handleFilesRemove"
				  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <el-button size="small" class="mr-3" type="success" @click="submitUpload">上传到服务器</el-button>
			  </el-upload>
		  </el-form-item>

		  <el-form-item label="视频" prop="path" v-if="form.type==='video'">
		  	  <el-upload
				  action="/uploadFiles"
				  name="file"
				  ref="upload"
				  accept="video/*"
				  :data="{path:'wechat/keywords/video'}"
				  show-file-list
				  :on-success="handleFilesSuccess"
				  :on-error="handleFilesError"
				  :on-remove="handleFilesRemove"
				  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <el-button size="small" class="mr-3" type="success" @click="submitUpload">上传到服务器</el-button>
			  </el-upload>
		  </el-form-item>

		  <el-form-item label="状态" prop="status">
		    <el-radio-group class="ml-0 ml-sm-2" v-model="form.status">
		      <el-radio :label="1">正常[默认]</el-radio>
		      <el-radio :label="0">停用</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item label="默认" prop="is_default">
		    <el-radio-group class="ml-0 ml-sm-2" v-model="form.is_default">
		      <el-radio :label="1">默认[默认]</el-radio>
		      <el-radio :label="0">否</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
		    <el-button @click="resetForm('form')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="Find"}
	var url='/wechat/addKeywords';
	var is_edit=false;
	var formData={
				keyword:'',
				value:'',
				type:'text',
				status:1,
				is_default:0,
			};
	{else/}
	var url='/wechat/editKeywords/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			form:formData,
			is_edit:is_edit,
			repeat_disabled:false,
			filesInfo:{
				fid:0
			},
	        rules: {
	          keyword: [
	            { required: true, message: '请输入关键词', trigger: 'blur' },
	          ],
	          value: [
	            { required: true, message: '请输入回复内容', trigger: 'blur' },
	          ],
	          status: [
	            { required: true, message: '请选择状态', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
		    submitUpload() {
		        this.$refs.upload.submit();
		    },
			handleFilesSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'wechat/keywords/image'){
							this.filesInfo=res.data;
							this.form.value=res.data.media_id;
						}else if(res.data.type == 'wechat/keywords/video'){
							this.filesInfo=res.data;
							this.form.value=res.data.media_id;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleFilesError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
		    handleFilesRemove(){
		    	var _this=this;
		    	const loading=XYBase.openloading();
		    	if (_this.filesInfo.fid) {
		    		$.getJSON('/files/uploads',{id:_this.filesInfo.fid},function(ret){
		    			loading.close();
		    			if(ret){
		    				if(ret.code == 0){
								_this.filesInfo.fid=0;
		    					return true;
		    				}else{
		    					XYBase.msg(ret.msg);
		    					return false;
		    				}
		    			}else{
		    				XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
		    		return false;
		    	}else{
		    		loading.close();
		    		return true;
		    	}
		    },
			updateFormData(){
				var _this=this;
				$.getJSON(url,function(ret){
					if (ret){
						if (ret.code === 0) {
							_this.form=ret.data;
							return;
						}
					}
					window.location.reload();
				})
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}else{
										_this.updateFormData();
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}